{% extends "base_generic.html" %}

{% block title %}Book List{% endblock %}

{% block content %}
  <div class="page-header" style="background: linear-gradient(45deg, #a29bfe, #6c5ce7); color: white; padding: 30px; border-radius: 15px; margin: -15px -15px 30px -15px; box-shadow: 0 8px 25px rgba(108, 92, 231, 0.3);">
    <h1 style="margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">📚 Book List</h1>
  </div>
  
  {% if book_list %}
    <div class="row">
      {% for book in book_list %}
        <div class="col-md-6" style="margin-bottom: 25px;">
          <div class="panel panel-default" style="border: none; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); background: rgba(255,255,255,0.95); transition: all 0.3s ease; transform: translateY(0);">
            <div class="panel-body" style="padding: 25px; background: linear-gradient(135deg, rgba(116, 185, 255, 0.05) 0%, rgba(162, 155, 254, 0.05) 100%); border-radius: 15px;">
              <h4 class="panel-title" style="border-bottom: 2px solid #74b9ff; padding-bottom: 10px; margin-bottom: 15px;">
                <a href="{{ book.get_absolute_url }}" style="color: #2d3436; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">
                  📖 {{ book.title }}
                </a>
              </h4>
              <p class="text-muted" style="color: #636e72 !important; margin-bottom: 10px;">
                <strong>✍️ Author:</strong> 
                <span style="color: #6c5ce7; font-weight: bold;">{{ book.author }}</span>
              </p>
              <p style="color: #2d3436; line-height: 1.6;">{{ book.summary|truncatewords:20 }}</p>
              
              {% if book.genre.all %}
                <p style="margin-top: 15px;"><strong style="color: #2d3436;">🏷️ Genre:</strong>
                {% for genre in book.genre.all %}
                  <span class="label label-info" style="background: linear-gradient(45deg, #74b9ff, #0984e3); margin-right: 5px; padding: 5px 10px; border-radius: 12px; font-size: 12px;">{{ genre.name }}</span>
                  {% if not forloop.last %} {% endif %}
                {% endfor %}
                </p>
              {% endif %}
            </div>
          </div>
        </div>
        
        {% if forloop.counter|divisibleby:2 %}
          </div><div class="row">
        {% endif %}
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-warning" role="alert" style="background: linear-gradient(45deg, #fdcb6e, #e17055); color: white; border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(253, 203, 110, 0.3); text-align: center; padding: 30px;">
      <h3 style="margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">📚 No Books Available</h3>
      <p style="margin: 10px 0 0 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">There are no books in the library.</p>
    </div>
  {% endif %}
  
  {% block pagination %}
    {{ block.super }}
  {% endblock %}

  <style>
    .panel:hover {
      transform: translateY(-8px) !important;
      box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
    }
    
    .panel-title a:hover {
      color: #6c5ce7 !important;
      text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
    }
    
    .label:hover {
      transform: scale(1.05);
      transition: all 0.2s ease;
    }
  </style>
{% endblock %} 